<template>
  <div v-if="context.model.search && context.model.search.length > 0" ref="header" class="jeesdp-content-header">
    <el-form ref="search" v-model="context.params" inline label-position="left" label-suffix="：">
      <template v-for="field in context.model.search">
        <jeesdp-form-item v-model="context.params[field.prop]"
                          :data="context.options[field.dict ? field.dict : field.prop]"
                          :field="field"
                          :validate="false"
        />
      </template>
      <el-form-item>
        <el-button-group>
          <el-button :title="'查询'" type="primary" @click="context.load()">查询</el-button>
          <el-button :title="'清空'" type="primary" @click="context.params = {}; context.load()">清空</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>
  <div v-if="context.model.buttons && context.model.buttons.length > 0" ref="tools" class="jeesdp-content-tools">
    <el-button-group>
      <template v-for="button in context.model.buttons">
        <el-button v-if="button.location === 'tools'"
                   :icon="button.icon"
                   :title="button.name"
                   :type="button.type"
                   @click="buttons[button.code].click(context, instance)"
        />
      </template>
    </el-button-group>
  </div>
  <div ref="table" class="jeesdp-content-table">
    <jeesdp-table v-if="context.model.fields.length > 0" ref="datagrid"
                  :data="context.data"
                  :fields="context.model.fields"
                  :loading="context.loading"
                  :options="context.options"
                  :page="context.page"
                  :row-key="context.model.rowKey"
    >
      <template v-if="context.model.buttons && context.model.buttons.length > 0" #action="scope">
        <el-button-group>
          <template v-for="button in context.model.buttons">
            <el-button v-if="button.location === 'table'" ref="datagrid"
                       :icon="button.icon"
                       :title="button.name"
                       :type="button.type"
                       link
                       @click="()=>{context.row = scope.row; buttons[button.code](context, instance)}"
            />
          </template>
        </el-button-group>
      </template>
    </jeesdp-table>
  </div>

  <el-dialog v-model="context.visible"
             :close-on-click-modal="false"
             :title="context.title"
             width="35%"
  >
    <el-scrollbar max-height="600px" style="padding: 5px 15px">
      <el-form ref="form" :model="context.form"
               label-position="left"
               label-suffix="："
               label-width="auto"
      >
        <template v-for="field in context.model.fields">
          <jeesdp-form-item v-if="field.type !== 'action' && field.type !== 'index' && field.type !== 'expand'"
                            v-model="context.form[field.prop]"
                            :field="field"
                            :options="context.options[field.dict ? field.dict : field.prop]"
          />
        </template>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer">
        <template v-for="button in context.model.buttons">
              <el-button v-if="button.location === 'dialog'"
                         :icon="button.icon"
                         :title="button.name"
                         :type="button.type"
                         @click="buttons[button.code](context, instance)"
              >
                {{ button.name }}
              </el-button>
            </template>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import buttons from "/@//components/buttons/index.js";

defineOptions({
  name: "Datagrid"
});

const action = {
  label: "操作",
  type: 'action',
  slot: 'action',
  fixed: 'right',
  width: 80,
};

const instance = getCurrentInstance();
const form = ref();
const tools = ref();
const table = ref();
const header = ref();
const datagrid = ref();

const context = reactive({
  form: {},
  data: [],
  params: {},
  options: {},
  title: '新增',
  loading: false,
  visible: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 100,
    currentChange: (pageNum) => {
      context.page.pageNum = pageNum;
      context.params.pageNum = pageNum;
      context.load();
    },
    sizeChange: (pageSize) => {
      context.page.pageSize = pageSize;
      context.params.pageSize = pageSize;
      context.load();
    },
  },
  model: {
    id: '',
    rowKey: 'id',
    search: [{
      prop: 'name',
      label: "名称",
      type: {
        code: "input",
        name: "文本框"
      },
    },],
    fields: [{
      prop: 'name',
      label: "字段名",
      type: {
        code: "input",
        name: "文本框"
      },
      width: 100,
    }],
    buttons: [{
      code: 'add',
      name: '新增',
      icon: 'CirclePlus',
      type: 'primary',
      location: 'tools'
    }, {
      code: 'edit',
      name: '修改',
      icon: 'Edit',
      type: 'primary',
      location: 'table'
    }, {
      code: 'remove',
      name: '删除',
      icon: 'Delete',
      type: 'danger',
      location: 'table'
    }, {
      code: 'cancel',
      name: '取消',
      type: 'default',
      location: 'dialog'
    }, {
      code: 'save',
      name: '保存',
      type: 'primary',
      location: 'dialog'
    },]
  },
  load: () => {
    console.log('load')
    context.tableLoading = true;
    /*list(copy(params, params)).then(res => {
      context.tableData = res.list;
      context.page.total = res.total;
      context.tableLoading = false;
    }).catch(err => {
      context.tableLoading = false;
    })*/
    context.data = [{
      demo: '测试'
    }, {
      demo: 'xx'
    }, {
      demo: 'xx'
    }];
    setTimeout(() => {
      context.tableLoading = false;
    }, 1000)
  },
  getSelectedIds: () => {
    return datagrid.value.getSelectedRows().map(item => {
      return item[context.model.rowKey];
    });
  },
  getSelectedRows: () => {
    return datagrid.value.getSelectedRows();
  }
})

const setTableHeight = () => {
  table.value.style.height = `${table.value.parentNode.clientHeight - header.value.clientHeight - tools.value.clientHeight - 46}px`
}
onMounted(() => {
  setTableHeight();
  window.addEventListener('resize', setTableHeight);
  for (let item of context.model.buttons) {
    if (item.location === 'table') {
      context.model.fields.push(action);
      break;
    }
  }
  context.load();
})

</script>
